<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<style>
  .product-image {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
}
</style>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">后台管理系统</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="userlist.html">用户管理</a></li>
            <li class="active"><a href="#">商品管理</a></li>
            <li><a href="../首页商品展示/home.html">回到首页</a></li>
        </ul>
    </div>
  </nav>

  <div class="container">
      <h2>商品管理 &gt; 添加商品</h2>
      <form class="form-horizontal">
          <div class="form-group">
              <label for="productName" class="col-sm-2 control-label">商品名称:</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="productName" placeholder="请输入商品名称">
              </div>
          </div>
          <div class="form-group">
            <label for="productImage" class="col-sm-2 control-label">商品图片:</label>
            <div class="col-sm-10">
                <input type="file" class="form-control-file" id="productImage" accept="image/*">
            </div>
          </div>
          <div class="form-group">
              <label for="productPrice" class="col-sm-2 control-label">价格:</label>
              <div class="col-sm-10">
                  <input type="number" class="form-control" id="productPrice" placeholder="请输入价格">
              </div>
          </div>
          <div class="form-group">
              <label for="productCategory" class="col-sm-2 control-label">类别:</label>
              <div class="col-sm-10">
                  <select class="form-control" id="productCategory">
                      <option>电子产品</option>
                      <option>家居用品</option>
                      <option>食品饮料</option>
                  </select>
              </div>
          </div>
          <div class="form-group">
              <label for="productStock" class="col-sm-2 control-label">库存:</label>
              <div class="col-sm-10">
                  <input type="number" class="form-control" id="productStock" placeholder="请输入库存数量">
              </div>
          </div>
          <div class="form-group">
              <label for="productDescription" class="col-sm-2 control-label">描述:</label>
              <div class="col-sm-10">
                  <textarea class="form-control" id="productDescription" rows="3" placeholder="请输入商品描述"></textarea>
              </div>
          </div>
          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary">保存</button>
                  <button type="reset" class="btn btn-default">清空</button>
              </div>
          </div>
      </form>
  </div>

  <div class="container">
      <h2>已添加的商品</h2>
      <table class="table">
          <thead>
              <tr>
                  <th>商品名称</th>
                  <th>图片</th>
                  <th>价格</th>
                  <th>类别</th>
                  <th>库存</th>
                  <th>描述</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody id="product-list">
          </tbody>
      </table>
  </div>

  <footer class="footer">
      <div class="container">
          <p class="text-muted text-center">Copyright © 2004 - 2040 www.365buyer.com 版权所有 某某电子商务有限公司，通信地址：大连市旅顺口区15042390098</p>
      </div>
  </footer>

  <script src="../jquery.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../JS/productlist.js"></script>
</body>
</html>